<template>
    <view class="geneReport">
        <u-navbar
            ref="navref"
            title="基因报告列表"
            placeholder
            bgColor="transparent"
            autoBack
        />
        <view>
            <z-paging
                ref="paging"
                :height="scrollHeight + 'px'"
                safe-area-inset-bottom
                use-safe-area-placeholder
                :fixed="false"
                :refresher-out-rate="0.8"
                :show-empty-view-reload-when-error="false"
                empty-view-error-text="暂无数据"
                bg-color="transparent"
                :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
                empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
                empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
                v-model="dataList"
                @query="queryList"
            >
                <view class="top" slot="top">
                    <text
                        class="topText"
                        style="font-size: 36rpx; font-weight: bold"
                        >检测报告已生成</text
                    >
                    <text class="topText" style="font-size: 24rpx"
                        >快去看看您的报告吧～</text
                    >
                </view>
                <view class="content">
                    <view
                        class="contentItem"
                        v-for="item in dataList"
                        :key="item.reportCode"
                    >
                        <view class="itemTitle">{{ item.title }}</view>
                        <view
                            >{{ item.detectedManName }}
                            {{ $u.timeFormat(item.createdAt, "yyyy-mm-dd") }}
                        </view>
                        <view>报告编号：{{ item.reportCode }}</view>
                        <u-button
                            text="查看报告"
                            color="#588BF3"
                            shape="circle"
                            :customStyle="customStyleButton"
                            @click="checkPreport(item.reportCode)"
                        />
                    </view>
                </view>
                <u-safe-bottom></u-safe-bottom>
            </z-paging>
        </view>
        <u-action-sheet
            :actions="actionList"
            round="20"
            cancelText="取消"
            @close="close"
            :show="showActionSheet"
            :safeAreaInsetBottom="true"
            :closeOnClickAction="true"
            :closeOnClickOverlay="true"
            @select="selectSheet"
        />
    </view>
</template>

<script>
import { reportBaseUrl } from "@/config/tendIdConfig.js";

export default {
    data() {
        return {
            showActionSheet: false,
            actionList: [],
            dataList: [1, 2, 3, 4],
            windowHeight: 0,
            scrollHeight: 0,
            customStyleButton: {
                width: "100%",
                height: "88rpx",
                fontSize: "32rpx",
            },
        };
    },
    methods: {
        queryList(pages, pageSize) {
            const that = this;
            uni.request({
                url: `${reportBaseUrl}/web/order_report/reportList`,
                header: {
                    H5accessToken: that.$store.state.reportToken,
                },
                method: "POST",
                data: {
                    pageNum: pages,
                    pageSize,
                },
                success(result) {
                    if (result.data.code === 200) {
                        const data = result.data.data.rows;
                        const total = result.data.data.total;
                        that.$refs.paging.completeByTotal(
                            data,
                            result.data.data.total
                        );
                    } else {
                        uni.showToast({
                            title: result.data.msg,
                            icon: "none",
                        });
                        that.$refs.paging.completeByTotal([], 0);
                    }
                },
                fail(error) {
                    console.log(error);
                },
            });
        },
        close() {
            this.showActionSheet = false;
        },
        selectSheet(e) {
            this.$u.route({
                url: "/pages_my/report_detail/index",
                params: {
                    reportCode: e.reportCode,
                    fileName: e.name,
                },
            });
        },
        checkPreport(reportCode) {
            const that = this;
            uni.request({
                url: reportBaseUrl + "/web/order_report/reportDetail",
                method: "GET",
                header: {
                    H5accessToken: that.$store.state.reportToken,
                },
                data: {
                    reportCode,
                },
                success(result) {
                    if (result.data.code === 200) {
                        const fileList = result.data.data.fileList;
                        if (fileList && fileList.length > 1) {
                            that.actionList = fileList.map((item) => {
                                return {
                                    name: item.fileName,
                                    reportCode: item.reportCode,
                                };
                            });
                            that.showActionSheet = true;
                        } else {
                            that.$u.route({
                                url: "/pages_my/report_detail/index",
                                params: {
                                    reportCode,
                                },
                            });
                        }
                    } else {
                        uni.showToast({
                            title: result.data.msg,
                            icon: "none",
                        });
                    }
                },
            });
        },
    },
    onReady() {
        this.windowHeight = uni.getSystemInfoSync().windowHeight;
        this.scrollHeight =
            this.windowHeight -
            Number(this.$refs.navref.height.replace("px", "")) -
            uni.getSystemInfoSync().statusBarHeight;
        this.$forceUpdate();
    },
};
</script>

<style lang="scss" scoped>
.geneReport {
    height: 100vh;
    background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/ff3b3642476d4f2cbe9ab36e59ee9d4b.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;

    .top {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 70rpx;
        padding-left: 60rpx;
        padding-bottom: 20rpx;
        box-sizing: border-box;

        .topText {
            color: #000;
        }
    }

    .content {
        width: 100%;
        padding: 10rpx 30rpx;
        box-sizing: border-box;

        .contentItem {
            width: 100%;
            min-height: 342rpx;
            background-color: #fff;
            box-shadow: 0px 4rpx 62rpx 0px rgba(82, 72, 27, 0.19);
            border-radius: 16rpx;
            overflow: hidden;
            margin-bottom: 30rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #333;
            padding: 32rpx 34rpx;
            box-sizing: border-box;

            .itemTitle {
                font-weight: bold;
                font-size: 32rpx;
            }

            .itemDetail {
                font-size: 28rpx;
            }
        }
    }
}
</style>
